<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .root {
            width: 1000px;
            margin: auto;
            border: 2px solid red;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .wfull {
            width: 100%;
        }

        .hfull {
            height: 100%;
        }

        .wh-full {
            width: 100%;
            height: 100%;
        }

        .img-cover {
            object-fit: cover;
        }

        .clear::after {
            content: '';
            display: block;
            clear: both;
        }

        .bg {
            background: lightcyan;
        }

/* 

        .left{
            font-size: 23px;
            padding: 16px;
        }
        .right input{
            font-size: 23px;
            padding: 16px;
        }
        .right button{
            font-size: 23px;
            padding: 16px;
        }
        
 */

    .left , .right input , .right button{
        font-size: 23px;
        padding: 16px;
    }


    </style>
</head>
<body>


    <div class="root bg   clear  ">

        <div class="left fl">
            <a href="#">主页</a>
            <a href="#">关于</a>
            <a href="#">更多</a>
        </div>
        <div class="right fr">
            <input type="text" placeholder="Search.." name="search">
            <button type="button"><i class="fa fa-search"></i></button>
        </div>

    </div>


    




    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">   
        
    必知必会

    这个布局仅用了 
        font-size: 23px 
        padding: 16px 
    就完成了 对齐+居中 的效果
    
    .left , .right input , .right button{
        font-size: 23px;
        padding: 16px;
    }

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <div class="left fl">
        <a href="#">主页</a>
        <a href="#">关于</a>
        <a href="#">更多</a>
    </div>
    <div class="right fr">
        <input type="text" placeholder="Search.." name="search">
        <button type="button"><i class="fa fa-search"></i></button>
    </div>


    </xmp>
</body>
</html>